<template>
  <div>
    <van-nav-bar :title="t('shiftoutTheWarehouse.shiftoutByCirculationBox')" left-arrow @click-left="onClickLeft" placeholder fixed/>

    <van-form style="margin-top: 15vh">
      <scanning @keydownEnter="handleScanOriginalLocation" :placeholder="t('shiftoutTheWarehouse.originalLocation')" :isFocus="true"
                style="margin-bottom: 20px; height: 50px;" ref="originalLocation"></scanning>
      <scanning @keydownEnter="handleScanOriginalCirculationBox" :placeholder="t('shiftoutTheWarehouse.originalCirculationBox')"
                style="margin-bottom: 20px; height: 50px;" ref="originalCirculationBox"></scanning>
      <scanning @keydownEnter="handleScanNewLocation" ref="newLocation" :placeholder="t('shiftoutTheWarehouse.newLocation')"
                style="margin-bottom: 20px; height: 50px;"></scanning>
      <div style="margin: 20px 7px; display: flex; justify-content: space-between;">
        <van-button block @click="reset" style="flex: 1;">{{t('reset')}}</van-button>
        <van-button block type="primary" @click="submit" style="margin-left: 5px; flex: 1;">{{t('submit')}}</van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup lang="ts">
import Scanning from "@/views/components/Scanning/index.vue";
import { useI18n } from "vue-i18n";
import { postRequest, scanSuccess, scanFail } from "@/api";
import { AppToast } from "@/utils/appToast";

const { t } = useI18n();

let originalLocationCode = ref('');
let newLocationCode = ref('');
let originalCirculationBoxCode = ref('');
const originalLocation = ref(null);
const originalCirculationBox = ref(null);
const newLocation = ref(null);
const onClickLeft = () => history.back();
const handleScanOriginalLocation = async code => {
  await postRequest(
      '/orderInfo/checkLocationExist',
      { locationCode: code }
  ).then(() => {
    scanSuccess()
    originalLocationCode.value = code
  }, reason => {
    scanFail()
    console.log(reason)
  })
};
const handleScanNewLocation = async code => {
  await postRequest(
      '/orderInfo/checkLocationExist',
      { locationCode: code }
  ).then(() => {
    scanSuccess()
    newLocationCode.value = code;
  }, reason => {
    scanFail()
    console.log(reason)
  })
};
const handleScanOriginalCirculationBox = async code => {
  await postRequest(
      '/orderInfo/checkContainerExist',
      { 
        containerCode: code,
        depotId: 0,
      }
  ).then(() => {
    scanSuccess()
    originalCirculationBoxCode.value = code;
  }, reason => {
    scanFail()
    console.log(reason);
  })
};

const reset = () => {
  originalLocation.value.setValue();
  originalCirculationBox.value.setValue();
  newLocation.value.setValue();
};

const submit = () => {
  postRequest("/orderInfo/movingLocation", {
    containerCode: originalCirculationBoxCode.value,
    dimension: 'container',
    fromTerminal: '1',
    locationCode: originalLocationCode.value,
    locationCodeNew: newLocationCode.value,
    modifiedUser: '',
  }).then(res => {
  	console.log(res);
   	// if (!res.data || res.data.length === 0) {
    //   AppToast(t("移库失败"), "fail");
    //   return;
    // }
    AppToast(t("movingLocationSuccess"), "success");
  })
};

</script>

<style scoped lang="less">
:deep(.van-cell) {
  font-size: 1rem;
}

:deep(.van-nav-bar__title) {
  font-size: 1rem;
  font-weight: 500;
  color: white;
}

:deep(.van-nav-bar__content) {
  background: #1b82d2;
}

:deep(.van-nav-bar .van-icon) {
  color: white;
}

:deep(.van-cell__label) {
  font-size: 1rem;
}
</style>